if (!ubi) var ubi = {};

// WORKAROUND:
// ubi.tabs is a wrapper of jQuery UI tabs
// Because jQuery UI tabs is lack of some features to interaction
// So i have to wrapper it to implement functions ubinote used:
// 1. complex events binding: i deal with some events like the on-close-btn-click-cb maunal.
// 2. separated tab panel support: i have to sync states between the hidden jQuery UI tab panel and the tab I add.
ubi.tabs = {

/* ubi.tabs deal tab panel and tab page as different part.
 * */
init: 
    function (div, nav) {
        ubi.tabs.div = div;
        ubi.tabs.nav = nav;
        $(ubi.tabs.div).tabs({ 
            panelTemplate: form_note_view(),
            });
        ubi.tabs.bind_tabs_add();
        ubi.tabs.bind_tabs_remove();
        ubi.tabs.bind_tabs_select();
        ubi.tabs.bind_tabs_btns_click();
    },

/* triggered when btns on panel were clicked.
 * include label and close button.
 * */
bind_tabs_btns_click:
    function () {
        var on_label_click_cb = function () {
            var target = $(this).find('.tab-label').attr('href');
            $(ubi.tabs.div).tabs('select', target);
        };
        $(ubi.tabs.nav).find('.ui-corner-top').unbind('click');
        $(ubi.tabs.nav).find('.ui-corner-top').click (on_label_click_cb);
        
        var on_close_btn_click_cb = function () {
            global.open_notes[global.crr_note_id].save_status();
            var my_target = $(this).attr('href');
            
            // WORKAROUND:
            // i have to find the id of page you clicked.
            // however, the select event won't be trigger
            // then i have to deal with the event and enumerate all tab btns
            // to find the index of the page clicked, by the hashed target
            var idx = ubi.tabs.get_idx_by_hash(my_target);
            // get note id by hashed target
            var my_note_id = get_formal_id_by_str(my_target.substr(1));
            // ok, close it.
            delete global.open_notes[my_note_id];
            ubi.tabs.remove(idx);
        }
        $(ubi.tabs.nav).find('.tab-close-btn').unbind('click');
        $(ubi.tabs.nav).find('.tab-close-btn').click(on_close_btn_click_cb);

    },

/* triggered when a different panel button be selected.
 * NOTICE: click to current button won't trigger select event.
 * */
bind_tabs_select:
    function () {
        $(ubi.tabs.div).bind('tabsselect', function(event, ui) {
        if ($(ui.panel).hasClass('.note-view')) {
            switch_toolbar('#note-view-bar', true);
            global.crr_note_id = $(ui.panel).attr('id').toString().split('_')[0];
            global.filter_fn = global.open_notes[global.crr_note_id].apply_filter;
            global.mode = 'note-view';
        } else if ($(ui.panel).hasClass('.notebook-view')) {
            switch_toolbar('#notebook-view-bar', true);
            global.filter_fn = ubi.notebook_view.apply_filter;
            global.mode = 'notebook-view';

        } else if ($(ui.panel).hasClass('.start-page')) {
            switch_toolbar('#start-page-bar', true);
            global.mode = 'start-page';
        } else {
            switch_toolbar('#start-page-bar', true);
        }

        global.crr_tab_panel = ui.panel;
        
        //change tabs btn
        //remove all selected class
        $(ubi.tabs.nav).find('.ui-corner-top').removeClass('ui-tabs-selected')
        //add selected class
        var target = $(ui.panel).attr('id');
        $(ubi.tabs.nav).find('.ui-corner-top a[href="#' + target + '"]').parent()
            .addClass('ui-tabs-selected');

        })
    },

/* triggered when a new tab-pair (panel button and page) is added.
 * */
bind_tabs_add:
    function () {
        $(ubi.tabs.div).bind('tabsadd', function(event, ui) {
            var target = $(ui.panel).attr('id');
            var title = $(ubi.tabs.div + ' ul li a[href="#' + target + '"]').text();
            var li = $(form_tab_btn(target, title));
            //bind qtips 
            li.qtip({
                    content: title,
                    position: {
                      corner: {
                        target: 'rightMiddle',
                        tooltip: 'leftMiddle',
                      }
                    },
                    style: {
                        name: 'cream',
                    },
                    hide: { when: 'inactive', delay: 1000 },
                });
            //append to ubi.tabs.nav
            $(ubi.tabs.nav).find('.ui-tabs-nav')
                .append(li);
            //events binding
            ubi.tabs.bind_tabs_btns_click();    
        });
    },

/* triggered when a tab-pair is removed.
 * */
bind_tabs_remove:
    function () {
        $(ubi.tabs.div).bind('tabsremove', function(event, ui) {
            var target = $(ui.panel).attr('id');
            $(ubi.tabs.nav).find('.ui-corner-top a[href="#' + target + '"]')
                .parent().remove();
        });
    },

/* wrapper of methods of jquery ui tab.
 * */
remove:
    function(selected_id) {
        $(ubi.tabs.div).tabs('remove', selected_id);
    },

select:
    function (panel) {
        $(ubi.tabs.div).tabs('select', panel);
    },

add:
    function (panel, title) {
        $(ubi.tabs.div).tabs( 'add' , panel, title );
    },

option:
    function (key, val) {
        if (val) {
           return  $(ubi.tabs.div).tabs('option', key, val); 
        } else {
           return  $(ubi.tabs.div).tabs('option', key); 
        }
    },

/*
 * return tab id by hash
 * because of lack of features about hasd. 
 * */
get_idx_by_hash :
    function (hash) {
        var ret = -1;
        $($(ubi.tabs.nav).find('.tab-label')).each(
            function (idx, obj){
                if ($(obj).attr('href') == hash) {
                    ret = idx;
                }
            })
        return ret;
    },
}
